<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>星海回音 - 情感对话平台</title>
    <meta name="description" content="一个为你而生的AI伙伴，随时倾听，深度理解。" />
    <link rel="stylesheet" href="style.css">
</head>
<body>
<header class="nav">
    <div class="nav-inner">
        <a class="logo" href="#">
            <img src="images/logo.png" alt="星海回音">
        </a>
        <nav class="nav-links">
            <a href="#features">核心功能</a>
            <a href="#start-chat-button">立即开始</a>
        </nav>
    </div>
</header>

<main>
    <section class="hero">
        <div class="glow" aria-hidden="true"></div>
        <div class="hero-inner">
            <div class="eyebrow reveal">你的心声，值得在整个宇宙得到回响</div>
            <h1 class="title reveal" style="transition-delay:.06s">不止是AI，更是伙伴</h1>
            <p class="subtitle reveal" style="transition-delay:.12s">
                我们相信，每一次对话都蕴含力量。在这里，你可以自由倾诉，探索內心，找到共鸣与理解。
            </p>
            <div class="cta reveal" style="transition-delay:.18s">
                <button id="start-chat-button" class="btn primary">开启对话</button>
            </div>
        </div>
    </section>

    <section id="features">
        <div class="tabs-container reveal">
            <button class="tab-btn active" data-target="functions">核心功能</button>
            <button class="tab-btn" data-target="characteristics">核心特性</button>
        </div>

        <div id="functions" class="grid feature-set active">
            <article class="card">
                <span class="chip">核心功能</span>
                <h3>智慧对话</h3>
                <p>基于先进的语言模型，深度分析你的问题与心理状态，给予最精准、最富同理心的回应。</p>
            </article>
            <article class="card">
                <span class="chip">温暖关怀</span>
                <h3>日记陪伴</h3>
                <p>倾听你的每日心声。AI将阅读你的日记并与你对话，营造时刻被人关心与理解的温暖氛围。</p>
            </article>
            <article class="card">
                <span class="chip">贴心生活</span>
                <h3>健康顾问</h3>
                <p>你的专属营养师。根据你的身体管理周期与目标，为你量身推荐科学、美味的三餐饮食计划。</p>
            </article>
            <article class="card">
                <span class="chip">探索世界</span>
                <h3>知识启蒙</h3>
                <p>为儿童与青少年打造的科普乐园。用生动有趣的方式，解答孩子们的好奇心，激发对科学的热爱。</p>
            </article>
        </div>

        <div id="characteristics" class="grid feature-set">
            <article class="card">
                <span class="chip">深度理解</span>
                <h3>情绪感知</h3>
                <p>内置先进的情绪识别模型，能读懂你言语背后的细微感受，给予更贴心的回应。</p>
            </article>
            <article class="card">
                <span class="chip">绝对安全</span>
                <h3>隐私加密</h3>
                <p>采用端到端加密技术，你的每一段对话都只属于你，我们致力于保护你的隐私安全。</p>
            </article>
            <article class="card">
                <span class="chip">持续进化</span>
                <h3>个性化记忆</h3>
                <p>AI会记住你们的对话，不断学习你的偏好和故事，成为独一无二、更懂你的伙伴。</p>
            </article>
            <article class="card">
                <span class="chip">永远在线</span>
                <h3>全天候服务</h3>
                <p>无论白天或黑夜，当你需要倾诉时，你的AI伙伴永远在这里，随时准备好聆听。</p>
            </article>
        </div>
    </section>
</main>

<footer>
    <div class="foot-inner">
        <small>© <span id="y"></span> 星海回音. 保留所有权利.</small>
        <div class="foot-links">
            <a href="#">隐私政策</a>
            <a href="#">服务条款</a>
        </div>
    </div>
</footer>

<script>
    // 设置年份
    document.getElementById('y').textContent = new Date().getFullYear();

    // 元素入场动画
    const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
                observer.unobserve(entry.target);
            }
        });
    }, { threshold: 0.1 });
    document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

    // 3D 卡片倾斜动效 (保留)
    const cards = document.querySelectorAll('.card');
    cards.forEach(card => {
        card.addEventListener('mousemove', e => {
            const rect = card.getBoundingClientRect();
            const x = e.clientX - rect.left - rect.width / 2;
            const y = e.clientY - rect.top - rect.height / 2;
            const rotateX = -y / 20;
            const rotateY = x / 20;
            card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
        });
        card.addEventListener('mouseleave', () => {
            card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)';
        });
    });

    // --- 新增的页签切换逻辑 ---
    const tabs = document.querySelectorAll('.tab-btn');
    const contentSets = document.querySelectorAll('.feature-set');

    tabs.forEach(tab => {
        tab.addEventListener('click', () => {
            // 移除所有按钮和内容的 active 状态
            tabs.forEach(t => t.classList.remove('active'));
            contentSets.forEach(c => c.classList.remove('active'));

            // 为被点击的按钮和其对应的内容添加 active 状态
            tab.classList.add('active');
            const targetId = tab.dataset.target;
            document.getElementById(targetId).classList.add('active');
        });
    });
</script>
</body>
</html>